<template>
  <div class="outer9">
    <div class="inter1">
      <h1>购物车</h1>
    </div>
    <div class="inter2">
      <div class="inter21">
        <input type="checkbox" class="checkAll"><span class="s1">全选</span>
        <span class="s2">商品名称</span><span class="s3">单价</span>
        <span class="count">数量</span><span class="total">小计</span><span class="del">操作</span>
      </div>
      <div class="inter22">
        <ul>
          <li v-for="(item, index) in imgListCart" :key="index" :onchange="calculate">
            <input type="checkbox" class="check" :checked="item.check" @change="calculate" @click="selected(index)"><img :src="item.image" alt="">
            <span class="s1">{{item.productName}}</span><span class="money">¥</span>
            <span class="price">{{item.price}}</span><input type="button" value="-" class="sub" @click="reduceNum(index)">
            <span class="count">{{item.productNum}}</span><input type="button" value="+" class="add" @click="addNum(index)">
            <span class="money1">¥</span><span class="total">{{item.productNum * item.price}}</span>
            <span class="del" @click="removeProduct(index)">删除</span>
          </li>
        </ul>
      </div>
      <div class="inter23">
        <div class="picture">
          <img src="../assets/img/购物车.png" alt="">
        </div>
        <p>您的购物车还没有商品，快去挑选心爱的商品吧！</p>
        <a href=""><span>去逛逛</span></a>
      </div>
    </div>
    <div class="inter3">
      <div class="inter31">
        <div class="last">
          <span style="color: black;font-size: 24px" :disable="disableSettleBtn" @click="placeOrder">确认结算</span>
        </div>
        <input type="checkbox" class="checkAll"><span class="s1">全选</span>
        <span class="ss1">删除</span><span class="ss2">清除下架商品</span>
        <div class="foot">
          已选<span class="totalCount">0</span>件
          合计(不含运费) : <span class="totalPrice">{{amount}}</span>元<br>
          <span class="ss3">已优惠 : <span class="ss4"> ¥0</span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgListCart: [
        ],
        amount: 0,
        check: false,
        disableSettleBtn: true
      }
    },
    mounted() {
      if (this.$cookies.get('user') === null){
        this.$router.push({path: '/login'})
      }
      this.getCart()
    },
    watch: {
      amount: function () {
        if (this.amount===0){
          this.disableSettleBtn = true
        } else {
          this.disableSettleBtn = false
        }
      }
    },
    methods:{
      calculate: function () {
        this.amount = 0
        if (this.imgListCart != null) {
          for (let i = 0; i<this.imgListCart.length; i++) {
            if (this.imgListCart[i].check === true){
              this.amount = this.amount + this.imgListCart[i].price * this.imgListCart[i].productNum
            }
          }
        }
      },
      selected: function(data) {
        console.log(data)
        if (this.imgListCart[data].check === true) {
          this.imgListCart[data].check = false
        } else {
          this.imgListCart[data].check = true
        }
      },
      getCart: function () {
        if (this.$cookies.get('user')===null || this.$cookies.get('user') === ''){
          this.$router.push({path: '/login'})
          return false
        }
        this.$axios({
          method: 'post',
          url: 'http://localhost:8080/api/cart/querycart',
          data: {
            userId: this.$cookies.get('user').userId
          },
          headers:{
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let data = res.data
          if (data.resultCode === '0'){
            this.imgListCart = data.shoppingCartList
            for (let i = 0; i<this.imgListCart.length; i++){
              this.imgListCart[i].image = require('../assets/img/s1.png')
              this.imgListCart[i].check = false
            }
          }
        }).catch(e => {
          console.log(e)
        })
      },
      removeProduct: function(index){
        this.$axios({
          method: 'post',
          url: 'http://localhost:8080/api/cart/operate',
          data: {
            userId: this.$cookies.get('user').userId,
            flag: 3,
            shoppingCartId: this.imgListCart[index].shoppingCartId
          },
          headers:{
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let data =res.data
          console.log(data)
        }).catch(e => {
          console.log(e)
        })
      },
      addNum: function (index) {
        this.imgListCart[index].productNum ++
        this.calculate()
      },
      reduceNum: function (index) {
        this.imgListCart[index].productNum --
        if (this.imgListCart[index].productNum <= 0){
          this.imgListCart[index].productNum = 1
        }
        this.calculate()

      },
      placeOrder: function () {
        let list=[]
        if (this.$cookies.get('user')===null || this.$cookies.get('user') === ''){
          this.$router.push({path: '/login'})
          return false
        }
        for (let i = 0; i<this.imgListCart.length; i++){
          if (this.imgListCart[i].check === true) {
            let item = JSON.parse(JSON.stringify(this.imgListCart[i]))
            item.userId = this.$cookies.get('user').userId
            list.push(item)
          }
        }
        if (list.length === 0){
          return false
        }
        this.$axios({
          method: 'post',
          url: 'http://localhost:8080/api/order/placeorder',
          data: {
            userId: this.$cookies.get('user').userId,
            orderDetailList: JSON.parse(JSON.stringify(list))
          },
          headers:{
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let data = res.data
          if (data.resultCode === '0') {
            console.log(list)
            for (let i = 0; i < list.length; i++){
              this.$axios({
                method: 'post',
                url: 'http://localhost:8080/api/cart/operate',
                data: {
                  userId: this.$cookies.get('user').userId,
                  flag: 3,
                  shoppingCartId: list[i].shoppingCartId
                },
                headers:{
                  'Content-Type': 'application/json'
                }
              }).then(res => {
                let data =res.data
                console.log(data)
              })
            }
          }
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
  img {
    vertical-align: middle;
  }
  .outer9{
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
  }
  .outer9 .inter1{
    margin: 0 auto;
    width: 1120px;
    height: 94px;

  }
  .outer9 .inter1 h1{
    font-weight: normal;
    padding-top: 40px;
    margin-top: 60px;
  }
  .outer9 .inter2{
    width: 1120px;
    height: 492px;
    /*background-color: #795da3;*/
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .outer9 .inter2 .inter21{
    width: 1118px;
    height: 54px;
    line-height:54px;
    background-color: #ffffff;
    font-size: 12px;
    color: #666666;
    border: 0.5px solid #cccccc;
    margin-bottom: 10px;
  }
  .outer9 .inter2 .checkAll{
    margin-left: 25px;
    width: 16px;
    height: 16px;
  }
  .outer9 .inter2 .check{
    margin-left: 25px;
    width: 16px;
    height: 16px;
  }
  .outer9 .s1{
    margin-left: 10px;
  }
  .outer9 .inter2 .inter21 .s2{
    margin-left: 40px;
  }
  .outer9 .inter2 .inter21 .s3{
    margin-left: 500px;
  }
  .outer9 .inter2 .inter21 .count{
    margin-left: 75px;
  }
  .outer9 .inter2 .inter21 .total{
    margin-left: 95px;
  }
  .outer9 .inter2 .money1{
    margin-left: 90px;
  }
  .outer9 .inter2 .inter21 .del{
    margin-left: 90px;
  }
  .outer9 .inter2 .inter22{
    width: 1118px;
    height: 326px;
    line-height: 100px;
    font-size: 12px;
    color: #666666;
    /*display: none;*/
  }
  .outer9 .inter2 .inter22 img{
    width: 66px;
    height: 66px;
    margin-left: 10px;
  }
  .outer9 .inter2 .inter22 ul li{
    width: 1118px;
    height: 101px;
    margin-bottom: 10px;
    background-color: #ffffff;
    list-style: none;
    border: 0.5px solid #cccccc;
  }
  .outer9 .inter2 .inter22 .money{
    margin-left: 435px;
  }
  .outer9 .inter2 .inter22 .sub{
    margin-left: 70px;
  }
  .outer9 .inter2 .inter22 .add{
    margin-left: 5px;
  }
  .outer9 .inter2 .del{
    margin-left: 80px;
  }
  .outer9 .inter3{
    width: 1118px;
    height: 90px;
    margin: 0 auto 50px;
    background-color: #ffffff;
    border: 0.5px solid #cccccc;
    font-size: 12px;
    color: #666666;
    /*display: none;*/
  }
  .outer9 .inter3 .inter31{
    width: 1058px;
    height: 48px;
    line-height: 48px;
    margin: 20px auto;
  }
  .outer9 .inter3 .ss1{
    margin-left: 40px;
  }
  .outer9 .inter3 .ss2{
    margin-left: 40px;
  }
  .outer9 .inter3 .foot{
    display: inline-block;
    float: right;
    width: 280px;
    height: 59px;
    line-height: 20px;
    /*background-color:red;*/
  }
  .outer9 .inter3 .foot .totalCount{
    color: #f44;
    font-size: 18px;
    font-weight: 700;
    padding: 0 4px;
    line-height: 20px;
  }
  .outer9 .inter3 .foot .totalPrice{
    font-size: 24px;
    font-weight: 700;
    margin-right: 6px;
    color: #f44;
    line-height: 18px;
  }
  .outer9 .inter3 .foot .ss3{
    float: right;
    padding: 0 60px;
  }
  .outer9 .inter3 .foot .ss4{
    color: #666;
    font-size: 16px;

  }
  .outer9 .inter3 .last{
    float: right;
    background-color: #FF5151;
    width: 194px;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }
  .outer9 .inter3 .last a{
    text-decoration: none;
    margin: 0 auto;
    font-size: 18px;
    color: #ffffff;
  }
  .outer9 .inter3 .checkAll{
    width: 16px;
    height: 16px;
  }

  .outer9 .inter23{
    width: 1118px;
    height: 524px;
    border: 0.5px solid #cccccc;
    text-align: center;
    display: none;
  }
  .outer9 .inter23 .picture{
    width: 1118px;
    height: 250px;
    /*background-color: yellow;*/
    text-align: center;
  }
  .outer9 .inter23 .picture img{
    width: 150px;
    height: 120px;
    margin: 110px;
  }
  .outer9 .inter23 p{
    color: #999;
    padding-bottom: 20px;
    font-size: 16px;
  }
  .outer9 .inter23 a{
    background: #c78a49;
    padding: 0 20px;
    height: 26px;
    line-height: 24px;
    margin: 0 auto;
  }
  .outer9 .inter23 span{
    font-size: 12px;
    color: #ffffff;text-align: center;
  }

</style>
